<!-- 商品数据 -->
<template>
	<view class="">
		<view class="br16 br-line margin20 hidden">
			<view class="bg-gray padding20 flex-bettwen">
				<text style="font-weight: bold;">商品榜</text>
				<view class="fs26 color-gray">全部分类 <u-icon name="arrow-right"></u-icon> </view>
			</view>
			<view class="">
				<scroll-view :scroll-x="true" class="scrollview-box ">
					<view class="scroll-item bg-white fs24 padding-tb20" v-for="(item,i) in titleList" :key="i">
						{{item}}
					</view>
					
					<view class="bg-white fs24 padding-tb20" v-for="(item,index) in 9" :key="item.id">
						<view class="flex-center">
							<view class="w-230 p-l30 m-r20">
								<u-lazy-load image="/static/images/img-goods.jpg"
									class="w-130 h-130 m-r20 br16"></u-lazy-load>
							</view>
							
							<!-- 成交金额 -->
							<view class="w-200 p-l30 m-r20">
								<view class="">￥100,000,00</view>
								<view class="m-t20 color-gray fs24">较上期 <u-icon name="arrow-upward" class="price-color"></u-icon> <text class="price-color">0.21%</text> </view>
							</view>
							
							<!-- 商品浏览量 -->
							<view class="w-200 p-l30 m-r20 m-r20">
								<view class="">12,709</view>
								<view class="m-t20 color-gray fs24">较上期 <u-icon name="arrow-downward" class="color-green"></u-icon> <text class="color-green">0.21%</text> </view>
							</view>
							<!-- 商品支付转化率 -->
							<view class="w-200 p-l30 m-r20">
								<view class="">20.98%</view>
								<view class="m-t20 color-gray fs24">较上期 <u-icon name="arrow-downward" class="color-green"></u-icon> <text class="color-green">0.21%</text> </view>
							</view>
							
							<!-- 支付件数 -->
							<view class="w-200 p-l30 m-r20">
								<view class="">700</view>
								<view class="m-t20 color-gray fs24">较上期 <u-icon name="arrow-downward" class="color-green"></u-icon> <text class="color-green">0.21%</text> </view>
							</view>
							
							<!-- 支付买家数 -->
							<view class="w-200 p-l30 m-r20">
								<view class="">233</view>
								<view class="m-t20 color-gray fs24">较上期 <u-icon name="arrow-downward" class="color-green"></u-icon> <text class="color-green">0.21%</text> </view>
							</view>
							
							<!-- 新买家 -->
							<view class="w-200 p-l30 m-r20">
								<view class="">213</view>
								<view class="m-t20 color-gray fs24">较上期 <u-icon name="arrow-downward" class="color-green"></u-icon> <text class="color-green">0.21%</text> </view>
							</view>
							
							<!-- 复购买家 -->
							<view class="w-200 p-l30 m-r20">
								<view class="">223</view>
								<view class="m-t20 color-gray fs24">较上期 <u-icon name="arrow-downward" class="color-green"></u-icon> <text class="color-green">0.21%</text> </view>
							</view>
							<!-- 退款金额 -->
							<view class="w-200 p-l30 m-r20">
								<view class="">￥23,232</view>
								<view class="m-t20 color-gray fs24">较上期 <u-icon name="arrow-downward" class="color-green"></u-icon> <text class="color-green">0.21%</text> </view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

		</view>


		<view class="h-100"></view>



	</view>
</template>

<script>
	export default {
		name: 'Goods',
		data() {
			return {
				titleList: [
					'商品排名',
					'成交金额',
					'商品浏览量',
					'商品支付转化率',
					'支付件数',
					'支付买家数',
					'新买家',
					'复购买家',
					'退款金额',
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scrollview-box {
		white-space: nowrap;
		/* 滚动必须加的属性 */
		// width: 100%;
	}

	.scroll-item {
		display: inline-flex;
		/* item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 */
		flex-direction: column;
		align-items: center;
		width: 200rpx;
		border-right: 2rpx solid #f2f2f2;
		border-bottom: 2rpx solid #f2f2f2;
	}
	.color-green{
		color: #58bc6a;
	}
</style>